<template>
  <div class="course-add">
    <el-page-header @back="$goBack" :content="pageTitle" />
    <el-form :model="form" :rules="rules" ref="formRef" @submit="handleSubmit">
      <el-form-item label="封面" prop="thumb">
        <xu-upload v-model="form.thumb" />
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="课程讲师" prop="teacher_id">
            <el-select v-model="form.teacher_id" placeholder="请选择" style="width: 100%">
              <el-option
                v-for="option in teachers"
                :key="option.id"
                :value="option.id"
                :label="option.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="课程分类" prop="category_id">
            <el-select v-model="form.category_id" style="width: 100%" placeholder="请选择">
              <el-option
                v-for="category in categories"
                :key="category.id"
                :value="category.id"
                :label="category.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="课程名称" prop="name">
            <el-input v-model="form.title" placeholder="请输入课程名称" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="售卖价格" prop="price">
            <el-input type="number" v-model="form.price" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="原价" prop="origin_price">
            <el-input type="number" v-model="form.origin_price" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="浏览量" prop="views">
            <el-input type="number" v-model="form.views" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="购买人数" prop="buyer_count">
            <el-input type="number" v-model="form.buyer_count" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="课程到期时间">
            <el-tooltip content="0表示永不过期，数字代表多少天后到期">
              <el-input type="number" v-model="form.expire" />
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="课程简介" prop="description">
        <xu-editor v-model="form.description" />
      </el-form-item>
      <el-form-item label="课程资料" prop="data">
        <xu-editor v-model="form.data" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="handleSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import XuUpload from '@/components/xu-upload'
import XuEditor from '@/components/xu-editor'
import { TeacherActionsEnum } from '../../../_/vue/store/teacher'
import { CourseActionsEnum } from '../../../_/vue/store/course'
import { CategoryActionsEnum } from '../../../_/vue/store/category'
import { mapActions } from 'vuex'
export default {
  components: {
    XuUpload,
    XuEditor
  },
  data () {
    return {
      pageTitle: '添加课程',
      loading: false,
      id: '',
      form: {
        teacher_id: '',
        title: '',
        thumb: '',
        description: '',
        price: 0.0,
        origin_price: 0.0,
        views: 0,
        buyer_count: 0,
        expire: 0,
        data: ''
      },
      rules: {
        teacher_id: [{ required: true, message: '请选择授课讲师', trigger: 'blur' }],
        thumb: [{ required: true, message: '请上传封面', trigger: 'blur' }],
        title: [{ required: true, message: '请输入课程名称', trigger: 'blur' }]
      },
      teachers: [],
      categories: []
    }
  },
  async mounted () {
    if (this.$route.query.id) {
      this.id = this.$route.query.id
      const result = await this.edit(this.id)
      this.form = result.data
    }
    const teachers = await this.teacherSelect()
    this.teachers = teachers.data
    const categories = await this.categorySelect()
    this.categories = categories.data
  },
  methods: {
    ...mapActions({
      store: CourseActionsEnum.STORE,
      edit: CourseActionsEnum.EDIT,
      save: CourseActionsEnum.SAVE,
      teacherSelect: TeacherActionsEnum.SELECT,
      categorySelect: CategoryActionsEnum.SELECT
    }),
    handleSubmit () {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          this.loading = true
          try {
            if (this.id) {
              await this.save({ id: this.id, data: this.form })
            } else {
              await this.store(this.form)
            }
            this.$message.success('操作成功')
            this.$goBack()
          } catch (err) {
            console.log(err)
          }
          this.loading = false
        }

        return false
      })
    }
  }
}
</script>
